<template>
	<view class="edit-info-container">


		<scroll-view scroll-y class="content-scroll" :style="{ height: contentHeight + 'px' }">
			<view class="form-container">
				<view class="form-section">
					<view class="form-item">
						<text class="form-label">姓名</text>
						<input class="form-input" v-model="formData.name" placeholder="请输入姓名" />
					</view>

					<view class="form-item" style="display: flex; justify-content: space-between;">
						<text class="form-label">性别</text>
						<picker @change="onGenderChange" :value="genderIndex" :range="genderOptions">
							<view class="picker-view">
								<text class="picker-text">{{
									genderOptions[genderIndex]
									}}</text>
								<text class="picker-arrow">›</text>
							</view>
						</picker>
					</view>

					<view class="form-item" style="display: flex; justify-content: space-between;">
						<text class="form-label">民族</text>
						<picker @change="onNationChange" :value="nationIndex" :range="nationOptions">
							<view class="picker-view">
								<text class="picker-text">{{
									nationOptions[nationIndex]
									}}</text>
								<text class="picker-arrow">›</text>
							</view>
						</picker>
					</view>

					<view class="form-item" style="display: flex; justify-content: space-between;">
						<text class="form-label">出生日期</text>
						<picker mode="date" @change="onBirthDateChange" :value="formData.birthDate">
							<view class="picker-view">
								<text class="picker-text">{{
									formData.birthDate || '请选择出生日期'
									}}</text>
								<text class="picker-arrow">›</text>
							</view>
						</picker>
					</view>

					<view class="form-item">
						<text class="form-label">身份证号</text>
						<input class="form-input" v-model="formData.idCard" placeholder="请输入身份证号" />
					</view>

					<view class="form-item">
						<text class="form-label">本人联系电话</text>
						<input class="form-input" v-model="formData.phone" placeholder="请输入联系电话" />
					</view>

					<view class="form-item">
						<text class="form-label">紧急联系人姓名</text>
						<input class="form-input" v-model="formData.emergencyName" placeholder="请输入紧急联系人姓名" />
					</view>

					<view class="form-item">
						<text class="form-label">紧急联系人电话</text>
						<input class="form-input" v-model="formData.emergencyPhone" placeholder="请输入紧急联系人电话" />
					</view>

					<view class="form-item">
						<text class="form-label">上次于本医院</text>
						<input class="form-input" v-model="formData.lastVisit" placeholder="请输入上次就诊信息" />
					</view>

					<view class="form-item">
						<text class="form-label">正在诊疗单位</text>
						<input class="form-input" v-model="formData.currentHospital" placeholder="请输入正在诊疗的医院" />
					</view>

					<view class="form-item">
						<text class="form-label">咨询医生姓名</text>
						<input class="form-input" v-model="formData.doctorName" placeholder="请输入咨询医生姓名" />
					</view>
				</view>
			</view>
		</scroll-view>

		<button open-type="" hover-class="button-hover" @click="saveInfo"
			style="width: 80%;background: #1684FC ; color: white; border-radius: 20rpx;">
			保存
		</button>
	</view>
</template>

<script>
import { editUserInfo, getUserInfoApi } from '@/api/index';
export default {
	data() {
		return {
			statusBarHeight: 0,
			contentHeight: 0,
			genderIndex: 0,
			genderOptions: ['男', '女'],
			nationIndex: 0,
			nationOptions: [
				'汉',
				'蒙古',
				'回',
				'藏',
				'维吾尔',
				'苗',
				'彝',
				'壮',
				'布依',
				'朝鲜',
				'满',
				'侗',
				'瑶',
				'白',
				'土家',
				'哈尼',
				'哈萨克',
				'傣',
				'黎',
				'傈僳',
				'佤',
				'畲',
				'高山',
				'拉祜',
				'水',
				'东乡',
				'纳西',
				'景颇',
				'柯尔克孜',
				'土',
				'达斡尔',
				'仫佬',
				'羌',
				'布朗',
				'撒拉',
				'毛南',
				'仡佬',
				'锡伯',
				'阿昌',
				'普米',
				'塔吉克',
				'怒',
				'乌孜别克',
				'俄罗斯',
				'鄂温克',
				'德昂',
				'保安',
				'裕固',
				'京',
				'塔塔尔',
				'独龙',
				'鄂伦春',
				'赫哲',
				'门巴',
				'珞巴',
				'基诺',
			],
			formData: {
				name: '桥杏',
				birthDate: '1900-12-12',
				idCard: '511010190012120909',
				phone: '15509098888',
				emergencyName: '桥杏',
				emergencyPhone: '15509098888',
				lastVisit: '',
				currentHospital: '深圳市人民医院',
				doctorName: '桥小杏',
			},
		};
	},
	onLoad() {
		this.getSystemInfo();
	},
	methods: {
		getSystemInfo() {
			const systemInfo = uni.getSystemInfoSync();
			this.statusBarHeight = systemInfo.statusBarHeight || 0;
			// 计算内容区域高度：屏幕高度 - 状态栏 - 导航栏
			this.contentHeight = systemInfo.windowHeight - 88;
		},
		goBack() {
			uni.navigateBack();
		},
		onGenderChange(e) {
			this.genderIndex = e.detail.value;
		},
		onNationChange(e) {
			this.nationIndex = e.detail.value;
		},
		onBirthDateChange(e) {
			this.formData.birthDate = e.detail.value;
		},
		saveInfo() {
			// 简单验证
			if (!this.formData.name) {
				uni.showToast({
					title: '请输入姓名',
					icon: 'none',
				});
				return;
			}
			if (!this.formData.phone) {
				uni.showToast({
					title: '请输入联系电话',
					icon: 'none',
				});
				return;
			}

			// 保存成功提示
			uni.showToast({
				title: '保存成功',
				icon: 'success',
			});

			// 延迟返回上一页
			setTimeout(() => {
				uni.reLaunch({ url: '/pages/health/index' })
				// uni.navigateBack();
			}, 1500);
		},
	},
};
</script>

<style lang="scss" scoped>
.edit-info-container {
	min-height: 100vh;
	background: #f5f5f5;
}

.status-bar {
	background: #ffffff;
}

.edit-navbar {
	background: #ffffff;
	height: 88rpx;
	border-bottom: 1px solid #e5e5e5;
}

.edit-navbar .navbar-content {
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 100%;
	padding: 0 32rpx;
}

.nav-left {
	width: 60rpx;
	height: 60rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}

.back-icon {
	font-size: 48rpx;
	color: #333333;
	font-weight: bold;
}

.nav-title {
	font-size: 36rpx;
	font-weight: bold;
	color: #333333;
}

.nav-right {
	width: 60rpx;
	height: 60rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}

.save-btn {
	padding: 12rpx 24rpx;
	background: #4ecdc4;
	border-radius: 20rpx;
}

.save-text {
	font-size: 28rpx;
	color: #ffffff;
}

.content-scroll {
	background: #f5f5f5;
}

.form-container {
	padding: 32rpx;
}

.form-section {
	background: #ffffff;
	border-radius: 16rpx;
	overflow: hidden;
}

.form-item {
	padding: 32rpx;
	border-bottom: 1px solid #f0f0f0;
	display: flex;
	align-items: center;
}

.form-item:last-child {
	border-bottom: none;
}

.form-label {
	font-size: 32rpx;
	color: #333333;
	width: 240rpx;
	flex-shrink: 0;
}

.form-input {
	flex: 1;
	font-size: 32rpx;
	color: #333333;
	text-align: right;
}

.form-input::placeholder {
	color: #cccccc;
}

.picker-view {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: flex-end;
}

.picker-text {
	font-size: 32rpx;
	color: #333333;
	margin-right: 16rpx;
}

.picker-arrow {
	font-size: 32rpx;
	color: #cccccc;
	transform: rotate(90deg);
}
</style>